<template>
  <div class="score">
    <div class="test">
      <div class="title">
        <div>测评详情</div>
        <i class="el-icon-close" @click="hidden"></i>
      </div>
      <div v-if="score" class="container">
        <div class="left">
          <video :src="score.path" width="100%" height="100%" controls></video>
        </div>
        <div class="right">
          <div class="info">
            <div class="title">人员信息</div>
            <div class="text"><span>任务名称：</span>{{ score.task }}</div>
            <div class="text"><span>测试人员：</span>{{ score.pilot }}</div>
            <div class="text">
              <span>创建时间：</span>{{ score.createTime }}
            </div>
          </div>
          <div class="grade">
            <div class="title">评分表</div>
            <table cellspacing="0">
              <thead>
                <th colspan="2">打分模块</th>
                <th>得分</th>
                <th>总得分</th>
                <th>测试评价</th>
                <th>补充备注</th>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="4">操纵能力</td>
                  <td>操作完成度</td>
                  <td>
                    <input type="text" v-model="score.complete" disabled />
                  </td>
                  <td rowspan="8">
                    <input type="text" v-model="total" disabled />
                  </td>
                  <td rowspan="4">
                    <textarea
                      cols="30"
                      rows="10"
                      v-model="score.operateAssess"
                    ></textarea>
                  </td>
                  <td rowspan="4">
                    <textarea
                      cols="30"
                      rows="10"
                      v-model="score.operateRemarks"
                    ></textarea>
                  </td>
                </tr>
                <tr>
                  <td>及时性</td>
                  <td>
                    <input type="text" v-model="score.timeliness" disabled />
                  </td>
                </tr>
                <tr>
                  <td>平稳性</td>
                  <td>
                    <input type="text" v-model="score.placidity" disabled />
                  </td>
                </tr>
                <tr>
                  <td>准确性</td>
                  <td>
                    <input type="text" v-model="score.accuracy" disabled />
                  </td>
                </tr>
                <tr>
                  <td colspan="2">操作复现能力</td>
                  <td><input type="text" v-model="score.recurrent" /></td>
                  <td><textarea v-model="score.recurrentAssess"></textarea></td>
                  <td>
                    <textarea v-model="score.recurrentRemarks"></textarea>
                  </td>
                </tr>
                <tr>
                  <td colspan="2">手眼协调能力</td>
                  <td><input type="text" v-model="score.reaction" /></td>
                  <td><textarea v-model="score.reactionAssess"></textarea></td>
                  <td><textarea v-model="score.reactionRemarks"></textarea></td>
                </tr>
                <tr>
                  <td colspan="2">肢端协调能力</td>
                  <td><input type="text" v-model="score.coordinate" /></td>
                  <td>
                    <textarea v-model="score.coordinateAssess"></textarea>
                  </td>
                  <td>
                    <textarea v-model="score.coordinateRemarks"></textarea>
                  </td>
                </tr>
                <tr>
                  <td colspan="2">基本飞行绩效</td>
                  <td><input type="text" v-model="score.flyPerformance" /></td>
                  <td>
                    <textarea v-model="score.flyPerformanceAssess"></textarea>
                  </td>
                  <td>
                    <textarea v-model="score.flyPerformanceRemarks"></textarea>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="button">
            <el-button class="cancel" @click="hidden">取消</el-button>
            <el-button class="save" @click="save">保存</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTestScore, setTestScore } from "@/api/data";
export default {
  name: "Score",
  props: ["id"],
  data() {
    return {
      score: null,
    };
  },
  created() {
    getTestScore({ id: this.id }).then((res) => {
      this.score = res.data;
    });
  },
  computed: {
    total() {
      return (
        Number(this.score.complete) +
        Number(this.score.timeliness) +
        Number(this.score.placidity) +
        Number(this.score.accuracy) +
        Number(this.score.recurrent) +
        Number(this.score.reaction) +
        Number(this.score.coordinate) +
        Number(this.score.flyPerformance)
      );
    },
  },
  methods: {
    hidden() {
      this.score = this.scoreData;
      this.$store.state.app.scoreFlag = false;
    },
    save() {
      setTestScore(this.score).then((res) => {
        this.$modal.msgSuccess("操作成功!");
        this.$emit("updateData");
        this.hidden();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.score {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgba($color: #000000, $alpha: 0.7);
  width: 100%;
  height: 100%;

  .test {
    // margin: 20px auto 0;
    padding: 30px 24px;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    // border-radius: 24px;

    .title {
      display: flex;
      justify-content: space-between;
      height: 26px;
      line-height: 26px;
      font-size: 26px;

      i {
        font-size: 26px;
        cursor: pointer;
      }
    }

    .container {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;

      .left {
        width: 62%;
        height: 659px;
      }

      .right {
        width: 36%;

        .info {
          padding: 24px;
          background: #ffffff;
          box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);

          .title {
            margin-bottom: 24px;
            height: 20px;
            line-height: 20px;
            font-weight: 500;
            font-size: 20px;
          }

          .text {
            height: 18px;
            line-height: 18px;
            font-size: 18px;

            span {
              color: #666;
            }
          }

          .text + .text {
            margin-top: 20px;
          }
        }

        .grade {
          margin: 30px 0;

          .title {
            margin-bottom: 22px;
            height: 20px;
            line-height: 20px;
            font-size: 20px;
          }

          table {
            margin: 0;
            padding: 0;
            width: 100%;
            border-top: 1px solid #dae5ff;
            border-left: 1px solid #dae5ff;
            text-align: center;

            thead th {
              height: 46px;
              line-height: 46px;
              background: rgba($color: #dae5ff, $alpha: 0.5);
            }

            tbody {
              background: #fff;
            }

            th,
            td {
              padding: 0;
              height: 44px;
              border-right: 1px solid #dae5ff;
              border-bottom: 1px solid #dae5ff;

              input {
                width: 44px;
                height: 100%;
                border: none;
                font-size: 16px;
                text-align: center;
                color: #365eff;
                font-family: Source Han Sans CN;

                &:focus-visible {
                  outline: none;
                }
                &:disabled {
                  background: #fff;
                }
              }

              textarea {
                resize: none;
                width: 100px;
                border: none;
                line-height: 18px;
                font-size: 16px;
                text-align: center;
                color: #365eff;
                font-family: Source Han Sans CN;

                &:focus-visible {
                  outline: none;
                }
              }
            }
          }
        }

        .button {
          display: flex;
          justify-content: space-around;

          .el-button {
            width: 204px;
            height: 48px;
            background: #365eff;
            border-radius: 12px;
            font-size: 18px;
            color: #ffffff;
            border: none;
          }

          .cancel {
            background-color: #999999;
          }
        }
      }
    }
  }
}
</style>
